<!--受理详情-->
<style lang="less" scoped>
.list-goods-warp {
  .pic {
    margin:auto 10px auto 0;
  }
}
.dt-head{
  height:123px;
  &.shrink{
    height:88px !important;
  }
}
.dt-head-fix{
  top:0;
  padding:0 0 25px;
}
.gray {
  color:#aaabbb !important;
}
.pb5 {
  padding-bottom:5px !important;
  padding-top:5px;
}
.list-goods-warp:active{
  background: #fff;
}

.slide-fade-enter-active {
  transition: all .2s ease;
}
.slide-fade-leave-active {
  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateY(10px);
  opacity: 0;
}
.PackageItems {
  height:auto;
  overflow: hidden;
  padding-right:0.2rem;
}
.package-title {
  padding:0.1rem 0; 
  margin-top:0.2rem; 
  text-align:center; 
  background-color:#efefef; 
  font-size:12px; 
  color:#888
}
.package-switch-wrpper{
  height:0.4rem; 
  line-height:0.4rem; 
  text-align:center; 
  position:relative; 
  background-color:rgba(0,0,0,0.05); 
  margin: 0.1rem 0.2rem 0 0;
  &.darker{
    background-color:rgba(0,0,0,0.25);
    i{
      color:#fff;
    }
  }
  .toolbar {
    position:absolute; 
    width:100%;
  }
  i {
    display:inline-block;
    color:#bebebe
  }
  .open{
    transform:rotate(90deg);
  }
  .close{
    transform:rotate(270deg);
  }
}
.add{
  height:177px;
}
.vMask{
  z-index:999;
  position: absolute;
  height:100%;
  width:100%;
}

.form-wrap {
  padding:0;
}
.form-choice {
  &.line {
    padding-left: 0.2rem;
  }
}
.choice-time{
  text-align: left;
  padding-bottom:0px;
}
.detail-supply{
  position: fixed;
  width: 100%;
  z-index: 2;
}
.detail-goods-list{
  padding-top:47px;
}
</style>


<template>
  <div class="contain HVAduit">
    <div class="vMask" v-if="showMask"></div>
    <app-header></app-header>
    <div class="dt-head" :class="{add:(todolist.BillState == 'P02' || todolist.BillState == 'N'), shrink:!todolist.Province}">
      <div class="dt-head-fix">
        <template v-if="todolist.BillState == 'P02' || todolist.BillState == 'N'">
          <detail-header :status="'请受理订单'" :id="todolist"></detail-header>
        </template>
        <template v-else>
          <detail-header :id="todolist" :shownum="'N'"></detail-header>
        </template>
      </div>
    </div>

    <div class="detail-tab-lft" v-if="tab">
      <div class="detail-supply" v-if="type==1">
        <i class="iconfont icon-supplier ft17"></i>
        {{todolist.SupplierName}}
      </div>
      <div class="detail-supply" v-else>
        <i class="iconfont icon-supplier ft17"></i>
        {{todolist.CargoOwnerName}}
      </div>
      <div class="detail-fedbck df-body-nopad" v-if="tododetail.length == 0">
        <voice-msg :id="todolist"></voice-msg>
      </div>

      <div class="detail-goods-list" v-if="type==1 || type==3">
        <div class="list-goods-warp" v-bind:class="item.GoodsCode === '耗材包'?'pb5':''" v-for="item in tododetail">
          <div class="displayflex">
            <div class="pic">
              <img :src="item.PictContent | filterImgUrl">
            </div>
            <div class="msg flex1">
              <p class="ft17">{{item.SupplierGoodsName}}{{item.GoodsCode === '耗材包'?item.GoodsCode:''}}</p>
              <template v-if="item.GoodsCode !== '耗材包'">
                <p>规格：{{item.SupplierGoodsSpec}}</p>
                <p>商品编码：{{item.SupplierGoodsCode}}</p>
                <p>单价：￥{{item.SupplierPrice | fmoney}}</p>
                <p>生产厂商：{{item.Producer}}</p>
              </template>
              <template v-if="type > 1">
                <p class="ft12 gray">批号：{{item.Lot}}</p>
                <p class="ft12 gray">生产日期：{{item.Productiondate | time}}</p>
                <p class="ft12 gray">有效期：{{item.Expiredate | time}}</p>
              </template>
              <em class="def-color">
                  共<span class="red">{{item.SupplierPoQty}}</span>{{item.GoodsCode === '耗材包'?'套':item.SupplierUnit}}
                  <template v-if="type === 3">
                    ，已使用<span class="red">{{item.SupplierPesentQty}}</span>{{item.GoodsCode === '耗材包'?'套':item.SupplierUnit}}
                  </template>
              </em>
            </div>
          </div>
      
          <cd>
            <div v-show="item.Opened" class="PackageItems">
              <slot>
                <div class="package-title">{{item.GoodsCode === '耗材包'?item.GoodsCode:''}}明细</div>
                <div class="list-goods-warp PackageItem" v-for="package in item.PackageItems">
                  <div class="displayflex">
                    <div class="pic">
                      <img :src="package.PictContent | filterImgUrl">
                    </div>
                    <div class="msg flex1">
                      <p class="ft17">{{package.SupplierGoodsName}}{{package.GoodsCode === '耗材包'?package.GoodsCode:''}}</p>
                      <p>规格：{{package.SupplierGoodsSpec}}</p>
                      <p>商品编码：{{package.SupplierGoodsCode}}</p>
                      <p>单价：￥{{package.SupplierPrice | fmoney}}</p>
                      <p>生产厂商：{{package.Producer}}</p>
                      <template v-if="type > 1">
                        <p class="ft12 gray">批号：{{package.Lot}}</p>
                        <p class="ft12 gray">生产日期：{{package.Productiondate | time}}</p>
                        <p class="ft12 gray">有效期：{{package.Expiredate | time}}</p>
                      </template>
                      <em class="def-color">
                        共<span class="red">{{package.SupplierPoQty}}</span>{{package.SupplierUnit}}
                      </em>
                    </div>
                  </div>
                </div>
              </slot>
            </div> 
          </cd>

          <div v-if="item.PackageItems && item.PackageItems.length > 0" class="package-switch-wrpper" :class="item.Opened?'darker':''">
            <transition name="slide-fade" mode="out-in">
              <div class="toolbar" v-on:click="item.Opened = !item.Opened" key="open" v-if="item.Opened === false">
                <i class="iconfont icon-more open"></i>
              </div>
              <div class="toolbar" v-on:click="item.Opened = !item.Opened" key="close" v-else>
                <i class="iconfont icon-more close"></i>
              </div>
            </transition>
          </div>

        </div>

        <p class="detail-mark ft17">
          <em class="ft17">备注留言：</em>
          <i class="gray">{{(todolist.Memo == 'null') ? '':todolist.Memo}}</i>
        </p>
        <div class="detail-num">
          <em>共{{tododetail.length}}种商品</em>小计:
          <span class="red">￥{{(amount) | fmoney}}</span>
        </div>
      </div>
      
      <div class="detail-goods-list" v-else>
        <div class="list-goods-warp" v-bind:class="item.GoodsCode === '耗材包'?'pb5':''" v-for="item in tododetail">
          <div class="displayflex">
            <div class="pic">
              <img :src="item.PictContent | filterImgUrl">
            </div>
            <div class="msg flex1">
              <p class="ft17">{{item.GoodsName}}{{item.GoodsCode === '耗材包'?item.GoodsCode:''}}</p>
              <template v-if="item.GoodsCode !== '耗材包'">
                <p>规格：{{item.GoodsSpec}}</p>
                <p>商品编码：{{item.GoodsCode}}</p>
                <p>单价：￥{{item.Price | fmoney}}</p>
                <p>生产厂商：{{item.Producer}}</p>
              </template>

              <template v-if="type > 1 && item.GoodsCode !== '耗材包'">
                <p class="ft12 gray">批号：{{item.Lot}}</p>
                <p class="ft12 gray">生产日期：{{item.Productiondate | time}}</p>
                <p class="ft12 gray">有效期：{{item.Expiredate | time}}</p>
              </template>
              <em class="def-color">
                共
                <span class="red">{{item.Qty || item.Pcks}}</span>
                {{item.GoodsCode === '耗材包'?'套':item.Unit}}
              </em>
            </div>
          </div>
          
          <cd>
            <div v-show="item.Opened" class="PackageItems">
              <slot>
                <div class="package-title">{{item.GoodsCode === '耗材包'?item.GoodsCode:''}}明细</div>
                <div class="list-goods-warp PackageItem" v-for="package in item.PackageItems">
                  <div class="displayflex">
                    <div class="pic">
                      <img :src="package.PictContent | filterImgUrl">
                    </div>
                    <div class="msg flex1">
                      <p class="ft17">{{package.GoodsName}}{{package.GoodsCode === '耗材包'?package.GoodsCode:''}}</p>
                      <p>规格：{{package.GoodsSpec}}</p>
                      <p>商品编码：{{package.GoodsCode}}</p>
                      <p>单价：￥{{package.Price | fmoney}}</p>
                      <p>生产厂商：{{package.Producer}}</p>
                      <template v-if="type > 1">
                        <p class="ft12 gray">批号：{{package.Lot}}</p>
                        <p class="ft12 gray">生产日期：{{package.Productiondate | time}}</p>
                        <p class="ft12 gray">有效期：{{package.Expiredate | time}}</p>
                      </template>
                      <em class="def-color">
                        共<span class="red">{{package.Qty || package.Pcks}}</span>{{package.Unit}}
                      </em>
                    </div>
                  </div>
                </div>
              </slot>
            </div> 
          </cd>

          <div v-if="item.PackageItems && item.PackageItems.length > 0" class="package-switch-wrpper" :class="item.Opened?'darker':''">
            <transition name="slide-fade" mode="out-in">
              <div class="toolbar" v-on:click="item.Opened = !item.Opened" key="open" v-if="item.Opened === false">
                <i class="iconfont icon-more open"></i>
              </div>
              <div class="toolbar" v-on:click="item.Opened = !item.Opened" key="close" v-else>
                <i class="iconfont icon-more close"></i>
              </div>
            </transition>
          </div>

        </div>

        <p class="detail-mark ft17">
          <em class="ft17">备注留言：</em>
          <i class="gray">{{(todolist.Memo == 'null') ? '':todolist.Memo}}</i>
        </p>

        <div class="detail-num" v-if="type==1">
          <em>共{{todolist.DetailRecordSum}}种商品</em>小计:
          <span class="red">￥{{(amount) | fmoney}}</span>
        </div>
        <div class="detail-num" v-else-if="type==2">
          <em>共{{tododetail.length}}种商品</em>小计:
          <span class="red">￥{{(amount) | fmoney}}</span>
        </div>
        <div class="detail-num" v-else>
          <em>共{{todolist.CountSum}}种商品</em>小计:
          <span class="red">￥{{(amount) | fmoney}}</span>
        </div>
      </div>

      <div class="detail-customs" v-if="type != 3">
        <p>下单时间：{{todolist.InputDate || todolist.AcceptanceDate | time}}</p>
        <p v-if="(type == 1 && todolist.BillState == 'Y') || type == 2 ">预计送货日期：{{todolist.PreDeliverDate | time}}</p>
        <p v-if="type == 1">
          要求到货日期：{{todolist.PlanEndDate | time}}
          <!-- <span v-if="todolist.BillState!='P07' && todolist.BillState!='P10'">（{{todolist.PlanEndDate | jsDateDiff}}）</span> -->
        </p>
         <p v-else-if="type == 2">
          要求到货日期：{{todolist.PreArrivalDate || todolist.HvrPoPreArrivalDate || '' | time}}
          <!-- （{{todolist.PreArrivalDate || todolist.HvrPoPreArrivalDate | jsDateDiff}}） -->
        </p>
      </div>
       <div class="detail-customs" v-else>
        <p>
          手术编号：{{todolist.SurgeryBillNo}}
        </p>
         <p>
          手术日期：{{todolist.SurgeryDate | time}}
        </p>
        <p>手术医生：{{todolist.Doctorname}}</p>
        <p>患者姓名：{{todolist.PatientName}}</p>
        <p>住院号：{{todolist.InHospitalNumber}}</p>
        <p>病床号：{{todolist.BEDNumber}}</p>
      </div>
      <div class="detail-bottom displayflex">
        <span>合计：<em class="red">￥{{(amount) | fmoney}}</em></span>
        <div class="flex1 btn-grp">
          <div class="btn" @click="askForDate()" v-if="todolist.BillState == 'N' && type == 1">受理</div>
        </div>
      </div>
    </div>
    <template v-if="!tab">
      <feed-back :guid="todolist.Guid" :billno="todolist.BillNo"></feed-back>
    </template>

    <!--选择时间-->
    <actionsheet v-model="showPicker" :menus="choices" @on-click-menu="submit" show-cancel>
      <div slot="header">
        <div class="form-wrap">
          <div class="form-choice line">
            <datetime v-model="PreDeliverDate" :show.sync="visibility" :start-date="startDate" title="预计送货日期"></datetime>
          </div>
        </div>
        <div class="choice-time" id="setDay">
          <label @change="setTimes(1)">
            <input type="radio" name="time" class="list-radio-check" value="1" v-model="setday"> 
            <span class="list-radio-circle"></span> 
            <em class="txt">今天</em>
          </label>
          <label @change="setTimes(2)">
            <input type="radio" name="time" class="list-radio-check" value="2" v-model="setday"> 
            <span class="list-radio-circle"></span> 
            <em class="txt">明天</em>
          </label>
          <label @change="setTimes(3)">
            <input type="radio" name="time" class="list-radio-check"value="3" v-model="setday"> 
            <span class="list-radio-circle"></span> 
            <em class="txt">后天</em>
          </label>
          <label @change="anotherTime">
            <input type="radio" name="time" class="list-radio-check" value="4" v-model="setday"> 
            <span class="list-radio-circle"></span> 
            <em class="txt">其他</em>
          </label>
        </div>

      </div>
    </actionsheet>

  </div>
</template>

<script>
import detailHeader from "@/components/core/header/detail_header.vue";
import feedBack from "@/components/share/billfb/billfb.vue";
import voiceMsg from "@/components/share/voiceMsg/voicemsg.vue";
import appHeader from "@/components/core/header/app_header.vue";
import cd from "../../../tools/vue-transition-div.js";
export default {
  name: "acceptDetail",
  components: {
    appHeader,
    detailHeader,
    feedBack,
    voiceMsg,
    cd,
  },
  data() {
    return {
      showMask:false,
      tab: true,
      tododetail: [],
      todolist: [],
      popupVisible: false,
      ua: navigator.userAgent.toLowerCase(),
      shares: null,
      isApp: false,

      showPicker:false,
      choices: [{
        label: '<span style="color:#77babd">确定</span>',
        type: 'primary',
        value: 'submit'
      }],
      visibility:false,
      setday: '',
      today:'',
      startDate:'',
      PreDeliverDate:'',
    };
  },
  computed: {
    amount() {
      var total = 0;
      if (this.type == 1 || this.type == 3 ) {
        for (var i = 0; i < this.tododetail.length; i++) {
          total =
            total +
            this.tododetail[i].SupplierPrice * this.tododetail[i].SupplierPoQty;
        }
      } else if (this.type == 2 || this.type == 4) {
        for (var i = 0; i < this.tododetail.length; i++) {
          total = total + this.tododetail[i].Amount;
        }
      }

      return total;
    },
    guid() {
      return this.$route.query.id;
    },
    type() {
      return this.$route.query.type * 1;
    },
    userinfo() {
      return JSON.parse(localStorage.userinfo);
    }
  },
  created() {
    let title = '订单明细';
    this.getToday();
    switch (this.$route.query.type) {
      case 1:
        title = '高值要货单明细';
        break;
      case 2:
        title = '高值送货单明细';
        break;
      case 3:
        title = '高值使用单明细';
        break;
      case 4:
        title = '高值还货单明细';
        break;
    }
    document.title = title;

    sessionStorage.setItem('ConsumableTab', this.$route.query.type);
    if (this.type == 1) {
      this.getDate();
    } else if (this.type == 2 || this.type == 4) {
      this.getDateSS();
    }else{
      this.getDateSY();
    }
  },
  watch: {
    PreDeliverDate(n,o) {
      let dt = n;
      if(dt !== ''){
        let curTime = new Date(),
            today = this.formatDT(curTime),
            tomorrow = this.formatDT(new Date(curTime.getTime()+24*60*60*1000)),
            aftertomorrow = this.formatDT(new Date(curTime.getTime()+2*24*60*60*1000));
        switch(dt){
          case today:
            this.setday = '1';
            break;
          case tomorrow:
            this.setday = '2';
            break;
          case aftertomorrow:
            this.setday = '3';
            break;
          default:
            this.setday = '4';
            break;
        }
      }
    },
  },
  mounted() {
    this.$nextTick(function() {});
  },
  methods: {
    //获取高值送货、换货单详情
    getDateSS() {
      var self = this;
      var query = {
        PageIndex:1,
        PageSize:9999,
        Guid: this.guid
      };
      this.Ajax.post("getTrtplbbDetail", query).then((resp) => {
        if(resp.IsSuccess){
          resp.Datas.forEach(x => {
            x.Productiondate = x.ProductionDate;
            x.Expiredate = x.ExpireDate;
          });
          if(this.type === 2){
            resp.Datas = this.TransPackageData(resp.Datas);
          }
          this.tododetail = resp.Datas;
        } else {
          this.Toast({
            message: resp.ErrorMessage,
          });
        }
      }).catch((e) => {
        this.Toast({
          message: e.toString(),
        });
      });

      this.Ajax.post("getTrtplbbGuid", query).then((resp) => {
        if(resp.IsSuccess){
          this.todolist = resp.Data;
        } else {
          this.Toast({
            message: resp.ErrorMessage,
          });
        }
      }).catch((e) => {
        this.Toast({
          message: e.toString(),
        });
      });
    },

    //获取高值使用单详情
    getDateSY() {
      var self = this;
      var query = {
        PageIndex:1,
        PageSize:9999,
        Guid: this.guid
      };
      this.Ajax.post("getTrmedhvurDetail", query).then((resp) => {
        if(resp.IsSuccess){
          this.tododetail = resp.Datas;
        } else {
          this.Toast({
            message: resp.ErrorMessage,
          });
        }
      }).catch((e) => {
        this.Toast({
          message: e.toString(),
        });
      });

      this.Ajax.post("getTrmedhvurGuid", query).then((resp) => {
        if(resp.IsSuccess){
          this.todolist = resp.Data;
        } else {
          this.Toast({
            message: resp.ErrorMessage,
          });
        }
      }).catch((e) => {
        this.Toast({
          message: e.toString(),
        });
      });
    },

    //获取高值要货单详情
    getDate() {
      var self = this;
      var query = {
        PageIndex:1,
        PageSize:9999,
        Guid: this.guid
      };
      this.Ajax.post("getTrsupplierhvpoDetail", query).then((resp) => {
        if(resp.IsSuccess){
          if(this.type === 1) {
            resp.Datas = this.TransPackageData(resp.Datas);
          }
          this.tododetail = resp.Datas;
        } else {
          this.Toast({
            message: resp.ErrorMessage,
          });
        }
      }).catch((e) => {
        this.Toast({
          message: e.toString(),
        });
      });

      this.Ajax.post("getTrsupplierhvpoGuid", query).then((resp) => {
        if(resp.IsSuccess){
          this.todolist = resp.Data;
        } else {
          this.Toast({
            message: resp.ErrorMessage,
          });
        }
      }).catch((e) => {
        this.Toast({
          message: e.toString(),
        });
      });
    },

    //处理耗材包数据
    TransPackageData(args){
      let list = [],
          retData = [],
          indexTable = [];
      args.forEach(x => {
        x.GoodsCode = x.PurchaserGoodsCode
        list.push(x);
      });

      list.forEach((x, i) => {
        if(x.GoodsCode === '耗材包'){
          x.Opened = false;
          x.PackageItems = [];
          retData.push(x);
          indexTable.push(i);
        }
      });
      indexTable.forEach(x => {
        delete list[x];
      })
      indexTable = [];
      
      retData.forEach((x, xi) => {
        list.forEach((y,yi) => {
          if(y.ParentPackageGuid === x.PurchaserGoodsGGuid){
            x.PackageItems.push(y);
            indexTable.push(yi);
          }
        });
      });
      indexTable.forEach(x => {
        delete list[x];
      })

      retData = retData.concat(list).RemoveEmpty();
      return retData;
    },

    //高值要货单受理
    HVAccept(guid){
      if(this.userinfo === null){
        this.MessageBox.alert("请先登录帐号").then(action => {
          this.$router.replace({
            path:'/login',
          });
        });
      }
      var query = {
        Guid: guid,
        PreDeliverDate: this.PreDeliverDate,
        UpdateUserID: this.userinfo.StaffID,
        UpdateUserName: this.userinfo.Name
      };
      this.Ajax.post("HighValueOrderAudit", query).then((resp) => {
        if (resp.IsSuccess) {
          this.MessageBox.alert("受理成功").then(action => {
            this.$router.replace({
              path:'/order/acceptList',
            });
          });
        } else {
          this.showMask = true;
          if(resp.ErrorMessage.indexOf('重复受理') > -1) {
            setTimeout(() =>{ this.$router.go(-1) }, 1500);
          } else {
            setTimeout(() =>{ this.showMask = false }, 1500);
          }
          this.Toast({
            message: resp.ErrorMessage || "操作失败，请稍后重试",
          });
        }
      });
    },

    //选择时间
    askForDate(){
      this.showPicker = true;
    },
    submit(e){
      if(e === 'submit'){
        this.HVAccept(this.todolist.Guid);
      }
    },
    getToday() {
      let date = new Date(),
          year = date.getFullYear(),
          month = date.getMonth() + 1,
          day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      let time = `${year}-${month}-${day}`;
      this.startDate = `${year-3}-01-01`;
      this.today = time;
      this.PreDeliverDate = time;
    },
    anotherTime(){
      this.visibility = true;
    },
    formatDT(val){
      let year = val.getFullYear(),
          month = val.getMonth()+1,
          day = val.getDate();
      if(month < 10){
        month = '0' + month;
      }
      if(day < 10){
        day = '0' + day;
      }
      return year + '-' + month + '-' + day;
    },
    setTimes(val){
      var curTime = new Date();
      var tomorrow = new Date(curTime.getTime()+24*60*60*1000);
      var aftertomorrow = new Date(curTime.getTime()+2*24*60*60*1000);    
      if(val == 1){
        this.PreDeliverDate = this.formatDT(curTime);
      }else if(val == 2){
        this.PreDeliverDate = this.formatDT(tomorrow);
      }else if(val == 3){
        this.PreDeliverDate = this.formatDT(aftertomorrow);
      }
    },
  }
};
</script>